<script setup>
import {computed, toRef, toRefs} from "vue";
import {useStore, mapState, mapGetters} from "vuex";

const store = useStore()

// 使用toRef
const count = toRef(store.state, "count")
const doubleCount = toRef(store.getters, "doubleCount")

// 使用计算属性自己手动映射getters中的数据
const totalAge = computed(() => store.getters.totalAge)

// 使用toRefs
const {getUserById} = toRefs(store.getters)

/*
使用mapGetters映射getters中的数据
const {getDoubleTotalAge} = mapGetters(["getDoubleTotalAge"])
const getDoubleTotalAgeCompudet = computed(getDoubleTotalAge.bind({$store: store}))
 */
const getDoubleTotalAge=computed(()=>store.getters.getDoubleTotalAge)
const add = () => {
  store.dispatch("changeCountAction", count.value)
}
</script>

<template>
  <div class="layui-panel home">
    <h1>home组件</h1>
    <h3>Store中的state的count的值：{{ count }}</h3>
    <h3>Store中的getter的doubleCount的值：{{ doubleCount }}</h3>
    <h3>Store中的getter的totalAge的值：{{ totalAge }}</h3>
    <h3>Store中的getter的totalAge放大10倍的值：{{ getDoubleTotalAge }}</h3>
    <h3>从Store中的查找id为1的对象：{{ getUserById(2) }}</h3>
    <h3>从Store中的查找id为1的对象的名字：{{ getUserById(2).name }}</h3>

    <button type="button" class="layui-btn" @click="add">从home组件中修改store中的count</button>
  </div>
</template>

<style scoped lang="less"></style>